<template>
  <div class="adminlist">
    <!-- 头部 -->
    <div class="my_header">
      <i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="$router.back(-1)"></i>
      <div class="top1">管理员列表</div>
      <div class="select">
        <img src="static/icon_pc/icon/jiahao.png" alt="">
        <span @click="openaddmng()">添加</span>
      </div>
    </div>


    <div class="info">
      <div class="infor" v-for="(item,index) in userinfo" :key="index">
        <div>ID：<span class="xinxi">{{item.user_id}}</span></div>
        <div><span class="xinxi"></span></div>

        <div>联系电话：<span class="xinxi">{{item.mobile}}</span></div>
        <div id="detail">
          <ul class="cont">
            <li @click="edit(item.user_id)" class="blue">
              编辑
            </li>
            <li @click="delAdmin(item.user_id)" class="blue">
              删除
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        token: "",
        userinfo: []
      };
    },
    created() {
      // console.log(token)
      // 获取管理员列表
      // that.userindex(that.token)
      this.requList();
    },
    methods: {
      requList() {
        var token = localStorage.getItem("token");
        var that = this;
        that.token = token;
        $.ajax({
          type: "get",
          url: "http://zcapi.hrgsxt.cn/api/User_data/admin_list2",
          data: {
            token: token
          },
          cache: false,
          dataType: "json",
          success: function (data) {
            console.log(JSON.stringify(data));
            if (data.code == 200) {
              that.userinfo = data.data;
              console.log(that.userinfo);
            } else {
            }
          }
        });
      },

      // 添加管理员
      openaddmng() {
        this.$router.push({
          path: "./addadmin",
          query: {}
        });
      },

      // 点击编辑跳转到编辑页面
      edit(user_id) {
        this.$router.push({
          path: "./editadmin",
          query: {
            user_id: user_id
          }
        });
      },
      // 点击删除，删除当前管理员
      delAdmin(user_id) {
        var that = this;
        console.log(that.userinfo);
        var user_id = user_id;
        console.log(that.token);
        console.log(user_id);
        $.ajax({
          url: "http://zcapi.hrgsxt.cn/api/User_data/admin_del",
          type: "get",
          dataType: "json",
          data: {
            token: that.token,
            user_id: user_id
          },
          success: function (data) {
            that.$toast({
              message: data.message
            });
            // 刷新页面
            that.requList();
          }
        });
      }
    }
  };
</script>

<style scoped>
  /* 头部 */

  .my_header {
    width: 100%;
    height: 0.88rem;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: #fff;
    line-height: 0.88rem;
    position: relative;
    padding: 0 0.3rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }

  .my_header i {
    font-size: 0.4rem;
    float: left;
    line-height: 0.88rem;
  }

  .top1 {
    display: inline-block;
    /* margin-left: -.17rem */
  }

  .select {
    float: right;
  }

  .select img {
    width: 0.24rem;
    height: 0.24rem;
  }

  .select span {
    font-size: 0.28rem;
  }

  /* 员工信息 */

  .info {
    margin-top: 1.2rem;
    position: relative;
    border: 0.001rem dashed #efefef;
  }

  .info .infor {
    width: 92%;
    height: 1.8rem;
    background-color: #fff;
    border: 0.01rem solid #e2e2e2;
    margin: 0 auto;
    padding: 0.2rem;
    position: relative;
    margin-bottom: 0.2rem;
  }

  .infor div {
    height: 0.5rem;
    font-size: 0.26rem;
    color: #999;
  }

  .infor .xinxi {
    color: #333;
  }

  /* 查看详情 */

  #detail {
    width: 0.64rem;
    height: 1.8rem;
    position: absolute;
    right: 0;
    top: 0;
    border-left: 0.001rem solid #e2e2e2;
  }

  #detail .cont {
    font-size: 0.26rem;
  }

  #detail .cont li {
    font-size: 0.24rem;
    line-height: 0.3rem;
    padding: 0.16rem 0.2rem 0.31rem 0.2rem;
  }

  a {
    color: #0085f0;
  }

  .cont li:first-child {
    height: 0.9rem;
    box-sizing: border-box;
    border-bottom: 0.001rem solid #e2e2e2;
  }

  .fengxian {
    float: left;
    display: inline;
  }

  .grand {
    display: inline;
    line-height: 0.4rem;
    padding-right: 0.25rem;
    float: left;
  }

  .grand li {
    float: right;
    margin-left: 0.01rem;
  }

  .blue {
    color: rgba(0, 133, 240, 1);
  }
</style>
